﻿@import "../../core/less/import.less";
@radio-pre: ~"@{ui}-radio";

.hover() {
    & {
        .@{radio-pre}-inner {
            border-color: @color-primary;
        }
    }
}

.disabled() {
    .@{radio-pre}-inner {
        background-color: @color-background-normal;
        border-color: @color-disabled;
        color: @color-disabled;

        .@{ui}-icon {
            background-color: @color-disabled;
        }
    }
}

.@{radio-pre} {
    display: inline-block;
    cursor: pointer;
    position: relative;
    .clearfix;

    .@{radio-pre}-inner {
        display: inline-block;
        .square(14px);
        background-color: @color-background;
        color: @color;
        border-radius: 50%;
        border: 1px solid @color-border-normal;
        margin-right: 8px;
        float: left;
        position: relative;

        .@{ui}-icon {
            .center-middle(8px,8px);
            border-radius: 50%;
            background-color: @color-primary;
            .transform(scale(0));
            .transition(all @animate-time-fast+0.05 cubic-bezier(0.12, 0.4, 0.29, 1.46) @animate-time-fast);
        }
    }

    .@{radio-pre}-input {
        display: none;
    }

    .@{radio-pre}-text {
        float: left;
        color: @color-text-normal;
        line-height: 16px;
    }

    &:hover {
        .hover;
    }
}

.@{radio-pre}-hover {
    .hover;
}

.@{radio-pre}-checked {
    .@{radio-pre}-inner {
        border-color: @color-primary;

        .@{ui}-icon {
            .transform(scale(1));
        }
    }

    &[data-target] {
        .@{radio-pre}-inner {
            background-color: @color-background;
            border-color: @color-primary;
            color: @color-primary;

            .@{ui}-icon {
                .square(10px);
                background-color: @color-primary;
                margin-left: 2px;
                overflow: hidden;

                &:before {
                    display: none;
                }
            }
        }
    }
}

.@{radio-pre}-disabled {
    cursor: default;
    .disabled;

    &:hover {
        .disabled;
    }
}

/*lt ie9*/
.ltie9 {
    .@{radio-pre} {
        .@{radio-pre}-inner {
            .@{ui}-icon {
                display: none;
            }
        }
    }

    .@{radio-pre}-checked {
        .@{radio-pre}-inner {
            .@{ui}-icon {
                display: inline-block;
            }
        }
    }
}
